<template>
  <div id="create-course-steps">
    <Steps :current="currentIndex">
      <Step :title="currentIndex==0?'进行中':'完成'"
            content="填写课程信息"></Step>
      <Step :title="currentIndex==1?'进行中':currentIndex>1?'完成':'待进行'"
            content="选择上课教师及助教"></Step>
      <Step :title="currentIndex==2?'进行中':currentIndex>2?'完成':'待进行'"
            content="添加课程公告"></Step>
      <Step :title="currentIndex==3?'进行中':'待进行'"
            content="选择课前调查问卷"></Step>
    </Steps>
    <div class="step1"
         v-if="currentIndex==0">
      <div class="coure-detail">
        <span>课程名称</span>
        <Input placeholder="请输入课程名称"
               v-model="courseData.courseName"
               style="width: auto" />
      </div>
    </div>
    <div class="step2"
         v-if="currentIndex==1">
      <div class="coure-detail">
        <!-- <div class="teacher-select"
             v-if="0">
          <h5>教师选择（单选）：</h5>
          <RadioGroup v-model="courseData.teacherId"
                      @on-change="radioChange"
                      vertical>
            <Radio :label="item.id"
                   v-for="(item,index) in teacherSelectOptions"
                   :key="index">
              <img width="20"
                   height="20"
                   style="vertical-align: middle;"
                   :src="item.photo">
              <span>{{item.name}}</span>
            </Radio>
          </RadioGroup>
        </div> -->
        <div class="assistant">
          <h5>助教选择（多选）：</h5>
          <CheckboxGroup v-model="courseData.assistantIdList">
            <Checkbox :label="item.id"
                      v-for="(item,index) in assistantSelectOptions"
                      :key="index">
              <img width="20"
                   height="20"
                   style="vertical-align: middle;"
                   :src="item.photo">
              <span>{{item.name}}</span>
            </Checkbox>
          </CheckboxGroup>
        </div>
      </div>
    </div>
    <div class="step3"
         v-if="currentIndex==2">
      <div class="coure-detail">
        <div>添加课程公告</div>
        <Input v-model="courseData.notice"
               type="textarea"
               :rows="4"
               placeholder="请填写教学公告" />
      </div>
    </div>
    <div class="step4"
         v-if="currentIndex==3">
      <div class="coure-detail">
        <div>课前问卷选择</div>
        <RadioGroup v-model="courseData.questionnaireId"
                    vertical>
          <Radio :label="item.questionnaireId"
                 v-for="(item,index) in questionnaireSelectOptions"
                 :key="index">
            <span>{{item.questionnaireName}}</span>
          </Radio>
        </RadioGroup>
      </div>
    </div>
    <div class="btn-wrap">
      <Button @click="prev"
              v-if="currentIndex>0">上一步</Button>
      <Button @click="next"
              type="primary">{{currentIndex==3?'完成':'下一步'}}</Button>
    </div>
  </div>
</template>
<script>
import { getTeachersInfo, getQuestionnaireInfo, saveNewCourseInfo } from '@/api/management.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      currentIndex: 0,
      targetKeys1: this.getTargetKeys(),
      teacherSelectOptions: [
        {
          id: 1,
          label: '张三'
        },
        {
          id: 2,
          label: '李四'
        },
        {
          id: 3,
          label: '王五'
        },
        {
          id: 4,
          label: '赵六'
        }
      ],
      questionnaireSelectOptions: [],
      social: [],
      courseData: {
        assistantIdList: [],
        courseName: "",
        oldCourseId: this.$route.params.courseId,
        questionnaireId: '',
        teacherId: '',
        notice: ''
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    prev () {
      this.currentIndex--
    },
    next () {
      switch (this.currentIndex) {
        case 0:
          if (this.courseData.courseName) {
            this.currentIndex++
          } else {
            this.$Message.warning('请填写课程名称')
          }
          break;
        case 1:
          if (this.courseData.assistantIdList.length > 0) {
            this.currentIndex++
          } else if (this.courseData.assistantIdList.length == 0) {
            this.$Message.warning('请选择助教')
          }
          break;
        case 2:
          if (this.courseData.notice != '') {
            this.currentIndex++
          } else {
            this.$Message.warning('请填写教学公告')
          }
          break;
        case 3:
          if (this.courseData.questionnaireId != '') {
            this.courseData.teacherId = this.userId
            saveNewCourseInfo(this.courseData).then(res => {
              if (res.data.data) {
                this.$Message.success(res.data.data);
                this.currentIndex = 0
                this.$emit('createCourseDone')
              }
            })
          } else {
            this.$Message.warning('请选择问卷')
          }
          break;
        default:
          this.currentIndex++
          break
      }

    },
    getMockData () {
      let mockData = [];
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: 'Content ' + i,
          description: 'The desc of content  ' + i,
          disabled: Math.random() * 3 < 1
        });
      }
      return mockData;
    },
    getTargetKeys () {
      return this.getMockData()
        .filter(() => Math.random() * 2 > 1)
        .map(item => item.key);
    },
    render1 (item) {
      return item.label;
    },
    handleChange1 (newTargetKeys, direction, moveKeys) {
      this.targetKeys1 = newTargetKeys;
    },
    radioChange (val) {
      this.courseData.assistantIdList = this.courseData.assistantIdList.filter(item => {
        return item != this.courseData.teacherId
      })
    },
    getList () {
      getTeachersInfo().then(res => {
        if (res.data.length > 0) {
          this.teacherSelectOptions = res.data
          this.teacherSelectOptions.map((item) => {
            item.photo = process.env.API_ROOT.replace('wisdom-classroom/', '') + 'images/photo/' + item.photo
          })
        }
      })
      getQuestionnaireInfo().then(res => {
        if (res.data.length > 0) {
          this.questionnaireSelectOptions = res.data
        }
      })
    }
  },
  computed: {
    ...mapState({
      userId: state => state.user.userId,
    }),
    assistantSelectOptions () {
      return this.teacherSelectOptions.filter(item => {
        if (item.id != this.userId) {
          return true
        } else {
          return false
        }
      })
    },
    title (index) {
      const val = this.currentIndex - index
      if (val < 0) {
        return '待进行'
      } else if (val > 0) {
        return '已完成'
      } else {
        return '进行中'
      }
    }
  },
  watch: {},
  components: {

  }
}
</script>
<style lang="scss">
#create-course-steps {
  width: 100%;
  height: 100%;
  .coure-detail {
    text-align: center;
    margin: 40px 0;
  }
  .step2 {
    .coure-detail {
      display: flex;
      justify-content: center;
      .teacher-select {
        width: 150px;
        margin-right: 20px;
        .ivu-radio-group {
          text-align: left;
          padding-left: 10px;
          width: 100%;
          height: 300px;
          border-radius: 10px;
          overflow: auto;
          border: 1px solid #aaa;
        }
      }
      .assistant {
        width: 150px;
        .ivu-checkbox-group {
          text-align: left;
          height: 300px;
          overflow: auto;
          border-radius: 10px;
          border: 1px solid #aaa;
          padding-left: 10px;
          .ivu-checkbox-wrapper {
            display: block;
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
  .step4 {
    .coure-detail {
      .ivu-radio-group {
        text-align: left;
        max-height: 200px;
        overflow: auto;
      }
    }
  }
  .btn-wrap {
    text-align: center;
  }
}
</style>
